<!DOCTYPE html>
<html lang="en">
<head>
    <title>部门管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<#assign basePath=request.contextPath>
    <title>后台管理系统</title>
<#include "/WEB-INF/views/template/bootMainCss.ftl" parse=true encoding="utf-8">
    <link href="${basePath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/plugin/validator/popover.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/form.lzy.css" rel="stylesheet">
    <style>
        .verify-tip {
            display: none;
            margin-top: 5px;
            margin-bottom: 10px;
            color: #a94442;
            font-size: 85%;
        }
        .form-control, .input-group .form-control{ width: 100%;}
        .level{ width: 30%; display: inline-block; margin: 0 0 5px 10px;}
        .lin{display: inline-block;}
    </style>
</head>
<body>
<div class="panel panel-lzy">
    <div class="panel-body">
        <h5 class="tips-lzy">操作提示</h5>
        <ul class="tips-list-lzy">
            <li>◆&nbsp;<span>该页面可以创建部门，也可以设置部门销售产品时的分利比例。</span></li>
        </ul>
    </div>
</div>
<div class="content">
    <div class="row" style="margin: 15px 0 0 0;">
        <div class="col-lg-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <button id="add-dept" class="btn btn-xs btn-primary btn-create">
                        <i class="fa fa-plus"></i> 创建部门
                    </button>
                </div>

                <div id="dept-sub-list" class="panel panel-default ">
                    <div class="panel-body">
                        <table class="table table-hover v-middle" id="dataTables-depts">
                            <thead>
                            <tr>
                                <th>部门名称</th>
                                <th style="width: 100px; text-align: center;">操作</th>
                            </tr>
                            </thead>
                            <tbody id="tbody"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-8">
            <div id="dept-detail" class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-gear fa-fw"></i>
                    部门信息
                </div>
                <div class="panel-body">
                    <form id="dept-form" name="dept-form" role="form" class="form-horizontal" method="POST"
                          action="${basePath}/admin/dept/create" enctype="multipart/form-data">
                        <input type="hidden" id="deptId" name="id" value="">
                        <input type="hidden" id="enabled" name="enabled" value="true">
                        <div class="form-group">
                            <label for="deptCode" class="col-sm-3 control-label">部门简称：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="deptCode" name="deptCode"
                                       placeholder="请填写部门简称" minlength="2" maxlength="2" onblur="checkDeptCode()">
                                <span class="verify-tip">部门简称已存在,请更换部门简称!</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="deptName" class="col-sm-3 control-label">部门名称：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="deptName" name="deptName"
                                       placeholder="请填写部门名称" maxlength="30" onblur="checkDeptName()">
                                <span class="verify-tip">部门名称已存在,请更换部门名称!</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="deptSort" class="col-sm-3 control-label">部门序号：</label>
                            <div class="col-sm-9">
                                <div class="input-group">
										<span class="input-group-btn">
											<input type="text" class="form-control" id="deptSort" name="deptSort"
                                                   placeholder="部门序号" maxlength="3">
										</span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="remark" class="col-sm-3 control-label">部门介绍：</label>
                            <div class="col-sm-9">
                                <textarea class="form-control" id="remark" name="remark" rows="2"
                                          placeholder="部门介绍"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">部门分利设置：</label>
                            <div class="col-sm-9">
                                一级<input type="text" name="oneLevel" class="form-control level" value="0.7" size="30" maxlength="4" max="1"><br>
                                二级<input type="text" name="twoLevel" class="form-control level" value="0.2" maxlength="4" max="1"><br>
                                三级<input type="text" name="threeLevel" class="form-control level" value="0.1" maxlength="4" max="1">
                            </div>
                        </div>
                        <hr/>
                        <div class="form-group">
                            <div class="col-sm-offset-4 col-sm-8">
                                <button type="button" class="btn btn-primary paper-shadow relative" id="btn-save"
                                        onclick="submitForm();">保存
                                </button>
                                <button type="button" class="btn btn-default" id="btn-return">返回</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .modal-box {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }

    .modal-content {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -260px;
        margin-top: -300px;
        width: 520px;
    }
</style>
<div class="modal-box">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                    aria-hidden="true">×</span></button>
            <h4 class="modal-title" id="myModalLabelmodalDialog_btn-select-dept">请选择部门</h4>
        </div>
        <div id="modal-tree" class="ztree modal-body" style="height: 390px; overflow: auto;">

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary btn-confirm">确认</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">退出</button>
        </div>
    </div>
</div>

<input type="hidden" id="_ctx" value="<%=request.getContextPath()%>">
<#include "/WEB-INF/views/template/bootMainJs.ftl" parse=true encoding="utf-8">
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
<script type="text/javascript">
    $(window).bootstrapValidator || document.write('<script src="${basePath}/bootstrap/js/bootstrapValidator.min.js"><\/script>');
</script>
<SCRIPT type="text/javascript">
    $(function () {
        var temp = "";
        $.ajax({
            url: "${basePath}/admin/dept/json",
            type: "GET",
            dataType: "json",
            data: {},
            success: function (data) {
                data = data.rows;
                for (var i = 0, len = data.length; i < len; i++) {
                    temp += '<tr><td>' + data[i].deptName + '</td><td><button type="button" class="btn btn-primary btn-xs" onclick="deptView('+data[i].id+')">查看</button> ';
                    temp += '<button type="button" class="btn btn-primary btn-xs" onclick="editMeal('+data[i].id+')">编辑</button></td></tr>';
                }
                $("#tbody").append(temp);
            },
            error: function () {
                console.log("请求失败")
            }
        })
    })

    //详情
    function deptView(id){
        $("#btn-save").hide();
        $("#dept-form input").each(function(){
            $(this).prop("disabled","true")
        })
        $("#dept-form textarea").prop("disabled","true");
        getData(id);
    }

    function getData(id){
        dtail.show();
        $.ajax({
            type: "GET",
            url: "${basePath}/admin/dept/"+id,
            data:{},
            dataType: 'json',
            success: function(data){
                $("#deptId").val(data.id);
                $("#deptCode").val(data.deptCode);
                $("#deptName").val(data.deptName);
                $("#deptSort").val(data.deptSort);
                $("#remark").val(data.remark);
                $(".level").eq(0).val(data.oneLevel);
                $(".level").eq(1).val(data.twoLevel);
                $(".level").eq(2).val(data.threeLevel);
            },
            error: function(){
                console.log("请求失败")
            }
        })
    }

    var submitType = 1;//新增
    //编辑
    function editMeal(id){
        $("#dept-form input").each(function(){
            $(this).removeAttr("disabled")
        })
        $("#dept-form textarea").removeAttr("disabled");
        $("#btn-save").show();
        getData(id);
        submitType = 2;//修改
    }

    function submitForm() {
        var url;
        if(submitType == 1){
            url = '${basePath}/admin/dept/create'
        }
        else{
            url = '${basePath}/admin/dept/update'
        }
        var bsVal = $("#dept-form").data('bootstrapValidator');
        bsVal.validate();
        if (bsVal.isValid() && $(".verify-tip:visible").length == 0) {
            $.ajax({
                method: 'POST',
                dataType: 'json',
                url: url,
                data: $("#dept-form").serialize(),
                success: function (data) {
                    if (data.code == '0') {
                        window.location.reload();
                        closePage();
                    } else {
                        layer.alert(data.desc, {
                            icon: 5
                        });
                    }
                }
            });
        }
    }

    //表单验证
    $('#dept-form').bootstrapValidator({
        fields: {
            deptCode: {
                validators: {
                    notEmpty: {
                        message: '请输入部门简称'
                    },
                    stringLength: {
                        min: 2,
                        max: 2,
                        message: '必须为两位字符'
                    },
                    regexp: {
                        regexp: /^[A-Z]{2,}$/,
                        message: '必须为大写的英文字母'
                    }
                }
            },
            deptName: {
                validators: {
                    notEmpty: {
                        message: '请输入部门名称'
                    }
                }
            },
            deptSort: {
                validators: {
                    notEmpty: {
                        message: '请输入部门序号'
                    },
                    regexp: {
                        regexp: regNumber,
                        message: '请输入数字'
                    }
                }
            }

        }
    })

    //检查部门简称唯一
    function checkDeptCode() {
        var obj = $('#deptCode');
        var val = obj.val();
        if (val == "" || $.trim(val) == "") {
            return false
        }
        else {
            $.ajax({
                type: 'GET',
                url: '${basePath}/admin/dept/select/deptCode',
                dataType: 'json',
                data: {
                    id: $("#deptId").val() || null,
                    deptCode: val
                },
                success: function (data) {
                    var btn = $("button.btn-success");
                    var small = obj.siblings(".verify-tip");
                    if (data.code == 1) {
                        small.show().css("display", "block");
                        btn.prop("disabled", "true");
                        return false;
                    }
                    else {
                        small.hide();
                        btn.removeProp("disabled");
                    }
                }
            });
        }
    }

    //检查部门名称唯一
    function checkDeptName() {
        var obj = $('#deptName');
        var val = obj.val();
        if (val == "" || $.trim(val) == "") {
            return false
        }
        else {
            $.ajax({
                type: 'GET',
                url: '${basePath}/admin/dept/select/deptName',
                dataType: 'json',
                data: {
                    id: $("#deptId").val() || null,
                    deptName: val
                },
                success: function (data) {
                    var btn = $("button.btn-success");
                    var small = obj.siblings(".verify-tip");
                    if (data.code == 1) {
                        small.show().css("display", "block");
                        btn.prop("disabled", "true");
                        return false;
                    }
                    else {
                        small.hide();
                        btn.removeProp("disabled");
                    }
                }
            });
        }
    }


    //页面事件
    var dtail = $("#dept-detail");
    dtail.hide();
    $("#btn-return").click(function () {
        dtail.hide();
    });
    $("#add-dept").click(function () {
        submitType = 1;
        $("#dept-form input").each(function(){
            $(this).val("").removeAttr("disabled")
        })
        $("#dept-form textarea").val("").removeAttr("disabled");
        $("#btn-save").show();
        $(".level").eq(0).val("0.7");
        $(".level").eq(1).val("0.2");
        $(".level").eq(2).val("0.1");

        dtail.show();
        $("#btn-select-dept").click(function () {
            var mbox = $(".modal-box");
            var curVal, curId;
            //取值
            $("#modal-tree a").each(function () {
                $(this).click(function () {
                    curVal = $(this).attr("title");
                    curId = $(this).attr("data-id");
                    console.log(curId)
                })
            });
            mbox.show();
            var mbtn = $(".modal-footer button");
            mbtn.eq(0).click(function () {
                //赋值
                $("#parentName").html(curVal);
                $("#parentId").val(curId);
                mbox.hide();
            });
            mbtn.eq(1).click(function () {
                mbox.hide();
            });
            $(".modal-header .close").click(function () {
                mbox.hide();
            })
        })
    })


</SCRIPT>
</body>
</html>
